<!--
  Generated template for the MContactsPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar [class.hide]="isSearching">
    <ion-buttons>
      <button class="font_size_standard" ion-button icon-only (click)="isSearching = true">
        <ion-icon name="search"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>师傅</ion-title>
    <ion-buttons end>
      <button ion-button icon-only class="font_size_large ml20" (click)="push('ManagerPositionPage')"><i
        class="fa fa-map"></i></button>
    </ion-buttons>
  </ion-navbar>
  <ion-toolbar [class.hide]="!isSearching">
    <ion-searchbar mode="ios"
                   placeholder="名字/电话"
                   showCancelButton="true"
                   cancelButtonText="取消"
                   autocomplete="on"
                   spellcheck="true"
                   autocorrect="on"
                   (ionInput)="search($event.target.value)"
                   (ionCancel)="isSearching = false;search('')">
    </ion-searchbar>
  </ion-toolbar>
</ion-header>


<ion-content (click)="isSearching = false">
  <!--未搜索时显示的结果-->
  <ion-list *ngIf="!isSearching">
    <ion-item-group *ngFor="let contactArr of formatContacts">
      <ion-item-divider color="light" id="{{contactArr.key}}">{{contactArr.key}}</ion-item-divider>
      <ion-item *ngFor="let contact of contactArr.value"
                (click)="push('ManagerContactDetailPage',contact);$event.stopPropagation();">
        <ion-avatar class="section" item-start>
          <section>{{contact.VALUE|character}}</section>
        </ion-avatar>
        <h2>{{contact.VALUE}}</h2>
      </ion-item>
    </ion-item-group>
    <div class="w12 mt20 mb20 tc font_black_555">
      ------------------------ {{contactsNum}}位师傅 ------------------------
    </div>
  </ion-list>

  <!--搜索之后显示的数据-->
  <ion-list *ngIf="isSearching">
    <ion-item-group *ngFor="let contactArray of searchContacts">
      <ion-item-divider color="light" id="{{contactArray.key}}">{{contactArray.key}}</ion-item-divider>
      <ion-item *ngFor="let contact of contactArray.value"
                (click)="push('ManagerContactDetailPage',contact);$event.stopPropagation();">
        <ion-avatar class="section" item-start>
          <section>{{contact.VALUE|character}}</section>
        </ion-avatar>
        <h2>{{contact.VALUE}}</h2>
      </ion-item>
    </ion-item-group>
  </ion-list>

</ion-content>


<div class="letters" (click)="$event.stopPropagation();">
  <div class="letter">
    <span *ngFor="let letter of aletters" (click)="scrollToTop(letter)">{{letter}}</span>
  </div>
</div>
